<!DOCTYPE html>
<html lang="zh-CN">
<!-- 在</head>前添加jQuery和Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>永辉外卖系统 - 管理员登录</title>
	<!--引入css文件夹里面的bootstrap.css-->
	<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
	<!--引入js文件夹里面的jquery-->
	<script src="/static/bootstrap/js/jquery.min.js"></script>
	<script src="/static/bootstrap/js/bootstrap.bundle.js"></script>
	<!--引入js文件夹里面的bootstrap.js-->
	<script src="/static/bootstrap/js/bootstrap.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
		}

		body {
			background: linear-gradient(135deg, #1890ff, #096dd9);
			min-height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20px;
		}

		.login-container {
			position: relative;
			width: 100%;
			max-width: 600px;
			z-index: 10;
			margin-top: 50px;
		}

		.login-bg {
			background: linear-gradient(135deg, #1890ff, #096dd9);
			position: fixed;
			width: 100%;
			height: 300px;
			left: 0;
			top: 0;
			z-index: 0;
		}

		.login-card {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
			padding: 40px 50px;
			position: relative;
			margin-bottom: 50px;
			transition: all 0.4s ease;
		}

		.logo-header {
			position: absolute;
			width: 100%;
			top: -60px;
			text-align: center;
		}

		.logo-title {
			font-size: 36px;
			color: #fff;
			font-weight: bold;
			text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
			letter-spacing: 1px;
		}

		.login-title {
			text-align: center;
			padding: 20px 0 30px;
			font-size: 28px;
			font-weight: 600;
			color: #1890ff;
			position: relative;
		}

		.login-title::after {
			content: "";
			position: absolute;
			width: 100px;
			height: 4px;
			background: #1890ff;
			bottom: 15px;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 2px;
		}

		.form-group {
			margin-bottom: 28px;
			position: relative;
		}

		.input-icon {
			position: absolute;
			left: 15px;
			top: 50%;
			transform: translateY(-50%);
			color: #aaa;
			font-size: 18px;
			z-index: 2;
		}

		.form-control {
			height: 52px;
			border: none;
			border-bottom: 1px solid #e8e8e8;
			border-radius: 0;
			padding: 5px 15px 5px 50px;
			font-size: 16px;
			transition: all 0.3s;
			background: transparent;
		}

		.form-control:focus {
			box-shadow: none;
			border-bottom: 2px solid #1890ff;
		}

		.form-control::placeholder {
			color: #bbb;
		}

		.remember-forgot {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 25px 0;
		}

		.remember-me {
			display: flex;
			align-items: center;
		}

		.remember-me input {
			margin-right: 8px;
			width: 18px;
			height: 18px;
			cursor: pointer;
		}

		.forgot-password {
			color: #1890ff;
			text-decoration: none;
			font-size: 14px;
			transition: all 0.3s;
		}

		.forgot-password:hover {
			color: #096dd9;
			text-decoration: underline;
		}

		.btn-login {
			background: #1890ff;
			border: none;
			height: 52px;
			font-size: 18px;
			font-weight: 600;
			letter-spacing: 1px;
			border-radius: 6px;
			transition: all 0.3s;
			width: 100%;
			color: white;
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn-login:hover {
			background: #096dd9;
			transform: translateY(-2px);
			box-shadow: 0 6px 15px rgba(24, 144, 255, 0.4);
		}

		.btn-login:disabled {
			background: #bae0ff;
			cursor: not-allowed;
			transform: none;
			box-shadow: none;
		}

		.loading-spinner {
			display: inline-block;
			width: 20px;
			height: 20px;
			border: 3px solid rgba(255,255,255,.3);
			border-radius: 50%;
			border-top-color: white;
			animation: spin 1s linear infinite;
			margin-right: 10px;
		}

		@keyframes spin {
			to { transform: rotate(360deg); }
		}

		.message-container {
			height: 30px;
			margin: 15px 0;
			text-align: center;
		}

		.error-message {
			color: #ff4d4f;
			font-size: 14px;
			font-weight: 500;
		}

		.success-message {
			color: #52c41a;
			font-size: 14px;
			font-weight: 500;
		}

		.footer {
			text-align: center;
			color: rgba(255,255,255,0.8);
			margin-top: 30px;
			font-size: 14px;
		}

		@media (max-width: 768px) {
			.login-card {
				padding: 30px;
				margin-top: 30px;
			}

			.login-title {
				font-size: 24px;
				padding: 15px 0 25px;
			}

			.logo-title {
				font-size: 28px;
			}
		}

		@media (max-width: 576px) {
			.login-card {
				padding: 25px 20px;
			}

			.form-control {
				height: 48px;
				font-size: 15px;
			}

			.btn-login {
				height: 48px;
				font-size: 16px;
			}
		}
	</style>
</head>
<body>
<div class="login-bg"></div>

<div class="login-container">
	<div class="logo-header">
		<div class="logo-title">永辉外卖系统</div>
	</div>

	<div class="login-card">
		<div class="login-title">管理员登录</div>

		<!--输入账号-->
		<div class="form-group">
			<i class="input-icon fas fa-user"></i>
			<input type="text" class="form-control" id="username" name="username" placeholder="请输入账号" autocomplete="off">
		</div>

		<!--输入密码-->
		<div class="form-group">
			<i class="input-icon fas fa-lock"></i>
			<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" autocomplete="off">
		</div>

		<div class="remember-forgot">
			<div class="remember-me">
				<input type="checkbox" id="rememberMe">
				<label for="rememberMe">记住密码</label>
			</div>
			<a href="#" class="forgot-password">忘记密码？</a>
		</div>

		<div class="message-container">
			<div class="error-message" id="errorMsg"></div>
			<div class="success-message" id="successMsg"></div>
		</div>

		<button class="btn-login" id="loginBtn">
			<span id="loginText">登录系统</span>
		</button>

		<!-- 登录消息提示框 -->
		<!--<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center">
			<div id="loginToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
				<div class="toast-body text-center">
				</div>
			</div>
		</div>-->


	</div>

	<div class="footer">
		© 2025 永辉外卖系统 | 管理员平台
	</div>
</div>

<script>


	//登录
	$(document).ready(function () {

		$('#loginBtn').click(function () {
			var username = $('#username').val();
			var password = $('#password').val();
			console.log("获取到账号：",username)
			console.log("获取到密码：",password)

			$.ajax({
				url : 'http://localhost:8888/api/admin/login',
				type : "POST",
				data: {
					username: username,
					password: password
				},
				success : function(data) {
					console.log(data);

					if(data === "-1"){
						alert("username or password is null")
					}else if(data === "1"){

						/*alert("right")
						$('#loginToast>.toast-body').text(data.message);
						console.log("认证");
						$('#loginToast').toast('show');*/

						alert("登录成功！")
						// TODO 跳转至主页面
						setTimeout(function() {
							window.location.href='http://localhost:8888/index.html';
						}, 1000);
					}else if(data === "0"){
						alert("username and password is wrong")
					}


				},
				/*error : function(data) {
					$('#loginToast>.toast-body').text("系统错误");
					$('#loginToast').toast('show');
				}*/

			});
		});
	});

</script>
</body>
</html>